<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导入Excel</title>
    <link rel="stylesheet" href="/static/component/pear/css/pear.css"/>
    <script src="/static/component/layui/layui.js"></script>
    <script src="/static/component/pear/pear.js"></script>
    <script src="/static/component/pear/module/ruinuo/sortable.js"></script>
    <script src="/static/component/pear/module/ruinuo/xm-select.js"></script>
</head>
<body>
<div class="view_body">
    <form class="layui-form" action="">
        <div class="ruinuo_box">
            <div class="main-container layui-row layui-col-space10 label_con">

                <fieldset class="layui-elem-field layui-field-title layui-col-xs12">
                    <legend class="tips_legend">导入说明</legend>
                </fieldset>
                <blockquote class="layui-elem-quote tips_legend layui-col-xs12">
                    1、请先下载模板，按照模板格式填写数据上传<br>
                    2、上传成功的数据可以做二次处理，确认没有问题后再上传<br>
                    3、导入之后，会返回每条数据的导入情况
                </blockquote>

                <DIV>
                    <div class="pear-btn pear-btn-sm btn_theme_1 uplist"><i class="ruinuo-icon icon-add-bold"></i>上传文件
                    </div>
                    <div class="pear-btn pear-btn-sm btn_theme_2" onclick="DownTpl()"><i
                            class="ruinuo-icon icon-add-bold"></i>下载模板
                    </div>
                </DIV>
                <table id="datatable" lay-filter="datatable"></table>

            </div>
        </div>
        <div class="bottom">
            <div class="ruinuo-button-con">
                <button type="button" class="pear-btn pear-btn-primary" onclick="SendForm()">
                    <i class="layui-icon layui-icon-ok"></i>确定导入
                </button>
            </div>
        </div>

    </form>
</div>
<script>
    let SettingData = {};
    let SeleteData = {};
    let menu_code = '';
    let raw = '';
    let InitData = {};
    let $ = layui.jquery;
    let modeUrl = '';
    layui.use(['form', 'http', 'public', 'engine_table', 'upload'], function () {
        let app_num = layui.public.GetQuery('app_num');
        let mode_num = layui.public.GetQuery('mode_num');
        modeUrl = '/' + app_num + '/' + mode_num + '/';
        FormBind();
    })

    function FormBind() {
        let token = localStorage.getItem('token') || '';
        layui.upload.render({
            elem: ".uplist",
            url: modeUrl + 'inexcel/',
            accept: 'file',
            number: 1,
            exts: 'xls|xlsx|csv',
            headers: {token: token},
            before: function (res) {
                layer.load();
            },
            done: function (res) {
                layui.layer.closeAll('loading');
                if (res.code == 200) {
                    LoadTable(res.data.data, res.data.cols)
                } else {
                    layui.layer.msg(res.msg, {icon: 2});
                }
            },
            error: function (res) {
                layui.layer.msg('请求出错，请稍后再试', {icon: 2});
            }
        })
    }

    function LoadTable(value = [], cols = []) {
        let tableid = "datatable";
        cols.push({title: '导入状态', field: 'is_fail', fixed: "right", minWidth: 120});
        cols.push({title: '导入详情', field: 'msg', fixed: "right", minWidth: 180});
        let caozuo = {
            title: '操作',
            minWidth: 80,
            fixed: "right",
            tpl: '<div>' +
                '<button type="button" class="pear-btn pear-btn-danger pear-btn-smm" onclick="layui.engine_table.DeleteTable(\'' + tableid + '\',{{d.LAY_INDEX}})"><i class="layui-icon layui-icon-delete"></i></button>' +
                '</div>'
        };
        cols.push(caozuo);
        let table = {
            style: 1,
            elem: tableid,
            limit: 0,
            page: false,
            height: 'full-320',
            cols: layui.engine_table.ColsAll(cols, tableid),
        }
        table['source'] = {};
        table['tag'] = 'jsontable';
        let c = {
            table: table,
        }
        SettingData[tableid] = c;
        layui.engine_table.TableStyle(table, value);
    }

    function DownTpl() {
        let url = modeUrl + 'templateexcel/';
        window.location.href = url;
    }

    function SendForm() {
        let dataBak = layui.table.cache['datatable'] || [];
        if (dataBak.length == 0) {
            layui.layer.msg('没有可导入的数据', {icon: 2});
            return false;
        }
        layui.http.SendAjax(modeUrl + 'inexcel/', {data: dataBak}, [], function (res) {

            let arr = res.data;
            arr.forEach(item => {
                if (item.is_fail == 1) {
                    item.is_fail = '失败'
                } else {
                    item.is_fail = "成功"
                }
            })
            if (res.code == 200) {
                layui.table.reload('datatable', {
                    data: arr, url: '',
                })
            } else {
                layui.layer.msg(res.msg, {icon: 2});
            }
        })

    }
</script>
</body>
</html>

